﻿@model Sealight.Core.DataAdapter.service
@{
    ViewBag.Title = "Thêm sửa dịch vụ";
    Layout = "~/Areas/Admin/Views/Shared/__AdminLayout.cshtml";

    string title = string.Empty, description = string.Empty, detail = string.Empty, id = string.Empty, image = "/ImageHandler.axd?imageSource=~/Content/images/no-photo-click.png&width=150&height=150";
    bool publish = false;
    if (Model != null)
    {
        id = Model.id.ToString();
        title = Model.title;
        description = Model.description;
        detail = Model.detail;        
        publish = Model.is_active;
        
        if(!string.IsNullOrEmpty(Model.image_url))
        {
            image = string.Format("/ImageHandler.axd?imageSource=~/Content/images/services/{0}&width=150&height=150", Model.image_url);
        }
    }
}
@section _Head{
    <script type="text/javascript">
        $("#nav-left").accordion("activate", 2);
    </script>
 }
<script type="text/javascript">
    $(document).ready(function () {
        //<![CDATA[
        // Replace the <textarea id="editor1"> with an CKEditor instance.
        var description_editor, detail_editor;

        if (description_editor)
            description_editor.destroy();
        if (detail_editor)
            detail_editor.destroy();

        description_editor = CKEDITOR.replace('description_field');
        detail_editor = CKEDITOR.replace('detail_field', {
            filebrowserImageBrowseUrl: '/file/Index',
            filebrowserImageUploadUrl: '/file/UploadImageWithCKEditor?folder=editors',
            height: 500,
            filebrowserWindowWidth: '640',
            filebrowserWindowHeight: '480'

        });
        // The instanceReady event is fired when an instance of CKEditor has finished
        // its initialization.
        CKEDITOR.on('instanceReady', function (ev) {
            // Show the editor name and description in the browser status bar.

        });
        //]]>
    });
</script>

<script type="text/javascript">
    
    $(document).ready(function () {

        $("a.buttons").button();

        $('#btn_save').click(function () {
            $('#new_edit_form').trigger("submit");
        });

        $('#btn_cancel').click(function () {
            window.location = "/admin/dv/index";
        });



        new AjaxUpload('#photo_upload', {
            action: '/file/UploadFile',
            data: { 'folder': 'services' },
            name: 'file_image',
            responseType: 'true',
            onComplete: function (file, response) {

                if (response != '0') {
                    $("#hidden_image_name").val(response);
                    var img_src = "~/Content/images/services/" + response;
                    var img_url = GetImageUrl(img_src, 150, 150, true, 100);
                    $("#photo_upload").attr("src", img_url);
                }
                else {

                    ShowErrorMessage('Invalid file extension (jpg|png|jpeg|gif).');
                }

            }
        });

        var container = $('div.container_error');

        //FORM VALIDATE & SUBMIT              
        //form validate & submit
        $("#new_edit_form").validate({
            rules: {
                title_field: {// compound rule 
                    required: true
                }
            },
            messages: {
                title_field: {
                    required: "Tiêu đề bắt buộc nhập."
                }
            },
            errorElement: "li",
            errorContainer: container,
            errorLabelContainer: $(".error", container)
            ,
            submitHandler: function (form) {
                var id = $('#hidden_id').val();
                var title = $('#title_field').val();

                var oEditorDescription = CKEDITOR.instances.description_field;
                var oEditorDetail = CKEDITOR.instances.detail_field;

                var description = oEditorDescription.getData();
                var detail = oEditorDetail.getData();

                var publish = $('#publish_field').is(':checked');
                var imgUrl = $('#hidden_image_name').val();

                JsUtils.ShowLoader('#manage_container', 'Lưu...');
                $.ajax({
                    type: "POST",
                    url: "/Admin/DV/AddOrUpdate",
                    data: ({ id: id, title: title, description: HtmlEncode(description),
                        detail: HtmlEncode(detail), publish: publish, imgUrl: imgUrl
                    }),
                    dataType: "json",
                    success: function (d) {
                        if (d != null) {

                            if (d.OperationComplete != null && d.OperationComplete == false && d.ErrorCode != null) {
                                if (d.ErrorFriendlyMessage != null) {
                                    ShowErrorMessage(d.ErrorFriendlyMessage);
                                }
                                return;
                            }
                            else {
                                //ShowErrorMessage("Lưu thành công", "thông báo");
                                window.location = "/admin/dv/index";
                            }
                        }
                    },
                    complete: function (d) {
                        JsUtils.hideLoader('#manage_container');
                    },
                    cache: false
                }); //end .ajax call
            }

        }); //end form.validate  

    });

    function ClearData() {

        var oEditorDescription = CKEDITOR.instances.description_field;
        var oEditorDetail = CKEDITOR.instances.detail_field;

        oEditorDescription.setData("");
        oEditorDetail.setData("");

        $('#title_field').val('');
        $('#photo_upload').attr('src', '../ImageHandler.axd?imageSource=~/Content/images/no-photo-click.png&width=150&height=150');
        $('#hidden_id').val('');
        $('#publish_field').attr('checked', false);
        $('#hidden_image_name').val('');
    }

   
    function DeleteService(id) {

        $.ajax({
            type: "POST",
            url: "/Admin/DV/DeleteForAdmin",
            data: ({ id: id }),
            dataType: "json",
            error: function (xhr, status, error) {
            },
            success: function (d) {
                if (d != null) {

                    if (d.OperationComplete != null && d.OperationComplete == false && d.ErrorCode != null) {
                        if (d.ErrorFriendlyMessage != null) {
                            ShowErrorMessage(d.ErrorFriendlyMessage);
                        }
                        return;
                    }
                }
            },
            complete: function () {
                LoadService();
            },
            cache: false
        });        //end ajax
    }

   

    function GetImage(imageName) {
        var imageSource;
        if (imageName == null || imageName == undefined || imageName == '') {
            imageSource = "~/Content/images/no-photo.png";
            return GetImageUrl(imageSource, 150, 150, true, 100);
        }
        else {
            imageSource = "~/Content/images/services/" + imageName;

            return GetImageUrl(imageSource, 150, 150, true, 100);
        }
    }

</script>
@if (!string.IsNullOrEmpty(id))
{
<h2>Sửa dịch vụ</h2>
}
else
{
<h2>Thêm mới dịch vụ</h2>
}
<div id="manage_container">
    <div id="new_edit_container">
        <form id="new_edit_form" method="post" action="" enctype="multipart/form-data">
        <fieldset style="width: 700px;" class="Internal">
            <legend class="Internal"></legend>
            <div class="container_error">
                <h5>
                    Vui lòng kiểm tra lại các lỗi...</h5>
                <ol class="error">
                </ol>
            </div>
            <div id="photoColumn" style="width: 200px;">
                <br />
                <a href="#">
                    <img src="@image"
                        alt="Click lên đây dể tải hình ảnh" id="photo_upload" style="border: solid 1px #d8e2e6;" /></a>
                <input type="hidden" name="hidden_image_name" id="hidden_image_name" />
            </div>
            <div id="infoColumn" style="width: 650px;">
                <table class="Internal">
                    <tbody>
                        <tr>
                            <td style="padding-top: 10px;">
                                <strong class="Internal">Tên dịch vụ:</strong>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="text" id="title_field" name="title_field" style="width: 340px" class="Internal" value="@title"/>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <table class="Internal">
                    <tbody>
                        <tr>
                            <td style="padding-top: 10px;">
                                <strong class="Internal">Mô tả:</strong>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <textarea id="description_field" name="description_field" style="width: 340px" rows="20"
                                    class="Internal">@description</textarea>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <table class="Internal">
                    <tbody>
                        <tr>
                            <td style="padding-top: 10px;">
                                <strong class="Internal">Chi tiết:</strong>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <textarea id="detail_field" name="detail_field" style="width: 340px" rows="50" class="Internal">@detail</textarea>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <table class="Internal" style="display: none;">
                    <tbody>
                        <tr>
                            <td style="padding-top: 10px;">
                                <strong class="Internal">Từ khóa:</strong>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="text" id="keyword_field" name="keyword_field" style="width: 340px" class="Internal" />
                            </td>
                        </tr>
                    </tbody>
                </table>
                <table class="Internal">
                    <tbody>
                        <tr>
                            <td colspan="2" style="padding-top: 10px;">
                                <input type="checkbox" id="publish_field" name="publish_field" class="Internal" checked="@(publish?"checked":"false")" /><strong
                                    class="Internal" >Publish</strong>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <br clear="all" />
            <br />
            <div style="width: 600px; text-align: right; margin-bottom: 10px; float: left;">
                <input type="hidden" id="hidden_id" value="@id" />
                <a href="javascript:void(0);" class="buttons" id="btn_save">Lưu </a><a href="javascript:void(0);"
                    class="buttons" id="btn_cancel">Hủy </a>
            </div>
        </fieldset>
        </form>
    </div>   
</div>